<!-- 添加联系人 -->
<template>
  <a-drawer
    :title="title"
    width="520"
    :bodyStyle="{ padding: '0' }"
    :visible="drawerVisible"
    :maskClosable="false"
    @close="onDrawerClose">
    <div class="header-box">
      <span>供应商：广东盛世机械工具集团股份有限公司</span>
    </div>
    <div class="detail-form-container">
      <a-form-model
        ref="formRef"
        :model="formData"
        :rules="formRules"
        layout="vertical">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="姓名" prop="name">
              <a-input v-model="formData.name" placeholder="请输入姓名" />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="账号是否启用" prop="isUse">
              <a-switch v-model="formData.isUse" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="当前职位" prop="curPosition">
              <a-input v-model="formData.curPosition" placeholder="请输入当前职位" />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="是否高管" prop="isSE">
              <ASelectList v-model="formData.isSE" :isHasDict="false" :defaultOption="isOption" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="联系电话" prop="phone">
              <a-input v-model="formData.phone" placeholder="请输入联系电话" />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="电子邮箱" prop="email">
              <a-input v-model="formData.email" placeholder="请输入电子邮箱" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="联系地区" prop="contactArea">
              <a-cascader v-model="formData.contactArea"  :options="contactAreaOptions" placeholder="请选择联系地区" />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="地址" prop="address">
              <a-input v-model="formData.address" placeholder="请输入地址" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div class="footer-box">
      <slot name="footer">
        <a-button type="primary" @click="onSubmit">确认</a-button>
        <a-button :style="{ marginLeft: '8px' }" @click="onCancel">取消</a-button>
      </slot>
    </div>
  </a-drawer>
</template>

<script>
export default {
  name: 'ContactPersonAdd',
  props: {
    title: {
      type: String,
      default: '添加联系人'
    }
  },
  data() {
    return {
      drawerVisible: false,
      isOption: [
        { label: '否', value: '0' },
        { label: '是', value: '1' },
      ],
      formData: {
        name: '',
        isUse: '1',
        curPosition: '',
        isSE: '',
        phone: '',
        email: '',
        contactArea: [],
        address: '',
      },
      formRules: {
        name: [{ required: true, message: '请输入姓名！', trigger: 'change' }],
        isUse: [{ required: true, message: '请选择账号是否启用！', trigger: 'change' }],
        curPosition: [{ required: true, message: '请输入当前职位！', trigger: 'change' }],
        isSE: [{ required: true, message: '请选择是否高管！', trigger: 'change' }],
        phone: [{ required: true, message: '请输入联系电话！', trigger: 'change' }],
        email: [{ required: false, message: '请输入电子邮箱！', trigger: 'change' }],
      },
      contactAreaOptions: [
        {
          value: '1',
          label: '北京市',
          children: [
            {
              value: '11',
              label: '东城区',
            },
            {
              value: '12',
              label: '西城区',
            },
            {
              value: '13',
              label: '朝阳区',
            },
          ],
        },
        {
          value: '2',
          label: '广东省',
          children: [
            {
              value: '21',
              label: '广州市',
              children: [
                {
                  value: '211',
                  label: '白云区',
                },
                {
                  value: '212',
                  label: '天河区',
                },
                {
                  value: '213',
                  label: '海珠区',
                },
                {
                  value: '214',
                  label: '越秀区',
                },
              ],
            },
          ],
        },
      ],
      previewVisible: false,
      previewImage: '',
      fileList: [],
    };
  },
  methods: {
    onDrawerOpen() {
      this.drawerVisible = true;
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
    },
    onDrawerClose() {
      this.drawerVisible = false;
    },
    
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$confirm({
            title: '操作提醒',
            content: '确定提交评估？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
              this.onDrawerClose();
              this.$message.success(`提交成功`);
              this.$emit('successCallback');
            }
          });
        } else {
          this.$message.error(`请把表单补充完整！`);
        }
      });
    },
    onCancel() {
      this.onDrawerClose();
    }
  }
}
</script>


<style lang="less" scoped>
.header-box {
  background-color: rgba(245, 245, 245, 1);
  padding: 6px 30px;
}
.footer-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(31, 127, 227, 0.08);
  display: flex;
  justify-content: center;
}
</style>